<template>
  <div class="wrap w-saomiao1 detail">
    <header>
        <img onclick="javascript :history.back(-1);" src="@/assets/img/l_b.png" alt="" />
        企业扫描件
    </header>
    

    <section class="sec2">
          <cube-upload
            v-model="files"
            :auto="false"
            :simultaneous-uploads="1"
            @files-added="filesAdded"
            @file-error="errHandler"
            >
            <div class="clear-fix">
              <cube-upload-file :file="yingyeImg" :key="i"></cube-upload-file>
              <cube-upload-btn :multiple="false">
                <div>
                  <i>＋</i>
                  <p>营业执照扫描件</p>
                </div>
              </cube-upload-btn>
            </div>
          </cube-upload>
    </section>
   <!--  <section class="sec2">
        <cube-upload
            ref="upload2"
            v-model="files"
            :action="action"
            :auto="false"
            :simultaneous-uploads="1"
            @files-added="addedHandler"
            @file-error="errHandler">
            <div class="clear-fix">
              <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
              <cube-upload-btn :multiple="false">
                <div>
                  <i>＋</i>
                  <p>法定代表人身份证(正面)</p>
                </div>
              </cube-upload-btn>
            </div>
          </cube-upload>
    </section>
    <section class="sec2">
          <cube-upload
            ref="upload3"
            v-model="files"
            :action="action"
            :auto="false"
            :simultaneous-uploads="1"
            @files-added="addedHandler"
            @file-error="errHandler">
            <div class="clear-fix">
              <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
              <cube-upload-btn :multiple="false">
                <div>
                  <i>＋</i>
                  <p>法定代表人身份证反面）</p>
                </div>
              </cube-upload-btn>
            </div>
          </cube-upload>
    </section>
    <section class="sec2">
        <cube-upload
            ref="upload4"
            v-model="files"
            :action="action"
            :auto="false"
            :simultaneous-uploads="1"
            @files-added="addedHandler"
            @file-error="errHandler">
            <div class="clear-fix">
              <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
              <cube-upload-btn :multiple="false">
                <div>
                  <i>＋</i>
                  <p>医疗器械经营许可证/<br />第二类医疗器械经营备案证</p>
                </div>
              </cube-upload-btn>
            </div>
          </cube-upload>
    </section>
 -->
    

    <button>完成</button>
    

</div>

</template>
<script>
    
export default {
  data(){
    return {
      action: this.api_url+'/index/upfile/',
      files: [],
      //图片列表
      yingyeImg: '',
      zhengImg: '',
      fanImg: '',
      xvkeImg: '',
      xvkeImg1:'',
    }
  },
  created(){

  },
  
  mounted(){
            
  },
  
  methods:{
    filesAdded(files) {
      //取图片文件，这里只取了数组中第一张图片
      const limitSize = 1 * 1024;
      const maxSize = 3 * 1024 * 1024;
      for (let i = 0; i< files.length; i++) {
        const file = files[i];
        // 如果选择的图片大小最大限制（这里为3M）则弹出提示
        if(file.size > maxSize){
          this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '图片不能大于3M',
              icon: ''
          }).show()
          break;
        }else{
          //压缩图片

        }

      }

      let fd = new FormData();
      fd.append("fileData", files[0]);
      let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };      
      this.$axios.post('/index/upfile',fd,config).then(function(data) {
          if(data.code==200){

          }

      });

    },
    addedHandler() {
      const file = this.files[0]
      file && this.$refs.upload1.removeFile(file)
    },
    errHandler() {
      this.$createToast({
        type: 'warn',
        txt: '上传失败!',
        time: 1000
      }).show()
    },
    

  }

}
</script>
<style>
.cube-upload{
  margin: 0;
   height: 200px;
}
.cube-upload-file, .cube-upload-btn{
   margin: 0;
   height: 200px;
}
.cube-upload-file{
  margin: 0;
}
.cube-upload-btn{
  
}
.cube-upload-file-def{
  width: 100%;
  height: 100%;  
}
.cubeic-wrong{
  display: none;
}
 .cube-upload-btn{
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .cube-upload-btn div{
  text-align: center;
 }
 .cube-upload-btn i{
     display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
      font-size: 32px;
      line-height: 1;
      font-style: normal;
      color: #fff;
      background-color: #333;
      border-radius: 50%;
 }     
 .cube-upload-btn p{
    font-size:.42rem
 }

   

    

</style>